<template>
    <view class="container">
        <uni-card is-full :is-shadow="false">
            <text class="uni-h6">弹出层组件用于弹出一个覆盖到页面上的内容，使用场景如：底部弹出分享弹窗、页面插屏广告等。</text>
        </uni-card>

        <uni-section title="输入框示例" type="line" padding>
            <view class="dialog-box">
                <text class="dialog-text">输入内容：{{ value }}</text>
            </view>
            <button class="button" type="primary" @click="inputDialogToggle">
                <text class="button-text">输入对话框</text>
            </button>
        </uni-section>

        <view>
            <!-- 输入框示例 -->
            <uni-popup ref="inputDialog" type="dialog">
                <uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="对话框预置提示内容!"
                    placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
// 创建 inputDialog 的 ref
const inputDialog = ref(null);

const inputDialogToggle = () => {
    if (inputDialog.value) {
        inputDialog.value.open();
    }
};

const dialogInputConfirm = (val) => {
    uni.showLoading({
        title: '3秒后会关闭'
    });

    setTimeout(() => {
        uni.hideLoading();
        console.log(val);
        value.value = val;
        if (inputDialog.value) {
            inputDialog.value.close();
        }
    }, 3000);
};
</script>